<!-- home页将面包屑的初始化 第一个工作台给锁死 祥哥 靠你了 -->
<template>
  <div class="home">
    <el-container>
      <!-- 导航 -->
      <el-aside width="200px" v-if="isShow" class="menuBox">
        <el-menu
          class="menuLeft"
          @select="changeMeau()"
          background-color="#001529"
          text-color="#b3b9bf"
          active-text-color="#2c9cdf"
          :default-active="this.$route.path"
          :unique-opened="true"
          :collapse="isCollapse"
          router
        >
          <div class="logo">金氏办公</div>
          <template v-for="(item, index) in navigation">
            <el-menu-item-group
              v-if="!item.children"
              :index="'1' + index"
              :key="index + ''"
            >
              <el-menu-item :index="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </el-menu-item-group>

            <el-submenu v-if="item.children" :index="'1' + index" :key="index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <template v-for="(itemChild, indexChild) in item.children">
                  <el-menu-item
                    v-if="!itemChild.children"
                    :key="indexChild + ''"
                    :index="itemChild.path"
                  >
                    <span slot="title">{{ itemChild.name }}</span>
                  </el-menu-item>
                  <el-submenu
                    v-if="itemChild.children"
                    :key="indexChild + ''"
                    :index="'2' + indexChild"
                  >
                    <template slot="title">{{ itemChild.name }}</template>
                    <el-menu-item-group>
                      <el-menu-item
                        v-for="(itemChild1, indexChild1) in itemChild.children"
                        :index="itemChild1.path"
                        :key="indexChild1 + ''"
                      >
                        <span slot="title">{{ itemChild1.name }}</span>
                      </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </template>
              </el-menu-item-group>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-container :class="isCollapse ? (isShow ? 'routerView' : '') : ''" class="bg">
        <!-- 头部 -->
        <el-header class="homeHeader">
          <div class="homeIcon">
            <div class="left">
              <i class="el-icon-s-fold" @click="collapse()"></i>
              
            </div>
            <div class="titleHeader left">金氏办公，祝你成功</div>
            <div class="right">
              <div class="pictureHome left">
              </div>
              <div class="left title_text">欢迎你，管理员</div>
              <a class="left title_text" @click="quit">退出登录</a>
              
            </div>
            <div class="clear"></div>
          </div>
          <div class="homeRouter">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              closable
              @tab-remove="removeTab"
              @tab-click="tabSkip"
            >
              <el-tab-pane
                v-for="(item, index) in navlist"
                :key="item.path"
                :label="item.title"
                :name="item.path"
                :ischoose="item.ischoose"
              >
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-header>
        <!-- 跳转 -->
        <el-main>
          <div>
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { GetCookie, RemoveCookie, SetCookie } from "@/config/config";
// import { func } from "is2";
export default {
  name: "home",
  data() {
    return {
      navlist: [],
      editableTabsValue: GetCookie("editableTabsValue"),
      isCollapse: false,
      isShow: true,
      user1: GetCookie("isRememberMe"),
      navigation: [
        {
          name: "工作台",
          icon: "el-icon-s-platform",
          path: "/workBench",
        },
        // 系统管理
        {
          name: "系统管理",
          icon: "el-icon-s-tools",
          children: [
            {
              name: "用户管理",
              path: "/userManagement",
            },
            {
              name: "角色管理",
              path: "/roleUserList",
            },
            {
              name: "菜单管理",
              path: "/permission",
            },
            {
              name: "租户管理",
              path: "/tenant",
            },
            {
              name: "部门管理",
              path: "/depart",
            },
            {
              name: "职务管理",
              path: "/position",
            },
            {
              name: "我的部门",
              path: "/departUserList",
            },
            {
              name: "通讯录",
              path: "/addressList",
            },
            {
              name: "数据字典",
              path: "/dict",
            },
            {
              name: "分类字典",
              path: "/category",
            },
            {
              name: "系统通告",
              path: "/annountCement",
            },
            {
              name: "菜单管理2",
              path: "/newPermissionList",
            },
          ],
        },
        // 系统监控
        {
          name: "系统监控",
          icon: "el-icon-camera-solid",
          children: [
            {
              name: "路由网关",
              path: "/gatewayroute",
            },
            {
              name: "定时任务",
              path: "/QuartzJobList",
            },
            {
              name: "日志管理",
              path: "/log",
            },
            {
              name: "数据日志",
              path: "/dataLog-list",
            },
          ],
        },
        // 消息中心
        {
          name: "消息中心",
          icon: "el-icon-bell",
          children: [
            
            {
              name: "模板管理",
              path: "/sysMessageTemplateList",
            },
            {
              name: "消息管理",
              path: "/sysMessageList",
            },
            {
              name: "我的消息",
              path: "/userAnnouncement",
            },
          ],
        }
        


      ],
    };
  },
  methods: {
    collapse() {
      if (this.isShow) {
        this.isCollapse = !this.isCollapse;
      }
    },
    quit(){
      this.$router.push({
        path:'/'
      })
    },
    //根据视口大小让菜单栏隐藏
    useChildCarrierPunctualityDetailTable() {
      if (document.body.clientWidth < 1000) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    //根据视口大小让菜单栏隐藏
    selfAdaption() {
      var _this = this;
      window.onresize = function () {
        _this.useChildCarrierPunctualityDetailTable(); //onresize时要触发的函数
      };
    },
    // 面包屑 删除功能      删除功能有问题还需要改进 在back返回之前路由时path赋值再想想
    removeTab(targetName) {
      let _self = this;
      // console.log(targetName)
      let list = JSON.parse(GetCookie("navList"));
      for (let index in list) {
        if (list[index].path == targetName) {
          list.splice(index, 1);
        }
        // console.log(_self.$router.currentRoute.path)
      }
      SetCookie("navList", JSON.stringify(list));
      console.log(list);
      _self.navlist = list;
      //  _self.$router当前路由对象
      // console.log(_self.$router)
      // _self.$router.currentRoute 当前路由对象下的子集路由对象
      if (_self.$router.currentRoute.path == targetName) {
        if (_self.navlist.length == 1) {
          _self.$router.push({
            path: list[0].path,
          });
        } else {
          _self.$router.back({}); //返回上一级路由
        }
      }
      // console.log(JSON.parse(GetCookie("navList")));
    },
    // 导航页点击事件
    changeMeau() {
      let _self = this;
      if (GetCookie("navList")) {
        setTimeout(function () {
          _self.navlist = JSON.parse(GetCookie("navList"));
          _self.editableTabsValue = GetCookie("editableTabsValue");
          // console.log(_self.editableTabsValue);
        }, 1);
      }
    },
    // 面包屑点击事件
    tabSkip() {
      let _self = this;
      console.log(this);
      if (_self.$router.path !== _self.editableTabsValue) {
        _self.$router.push({
          path: _self.editableTabsValue,
        });
      }
    },
  },
  mounted() {
    let _self = this;
    this.selfAdaption();
    if (GetCookie("navList")) {
      setTimeout(function () {
        _self.navlist = JSON.parse(GetCookie("navList"));
      }, 0);
    }
    // JSON.parse(GetCookie("navList"))?JSON.parse(GetCookie("navList")):
  },
  updated() {},
};
</script>
<style lang="less">
.el-tabs--card > .el-tabs__header .el-tabs__item:after {
  border: none;
  height: 2px;
  background-color: #1e9fff;
}
.el-tabs--card > .el-tabs__header .el-tabs__item:hover:after {
  width: 100%;
}
.el-tabs--card > .el-tabs__header .el-tabs__item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 0;
  background-color: #1e9fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.left {
  float: left;
}
.clear {
  clear: both;
}
.right {
  float: right;
}

.menuLeft {
  position: fixed;
  height: 100%;
  overflow: scroll;
  overflow-x: hidden;
}
.menuLeft::-webkit-scrollbar{width: 0 !important}
* {
  padding: 0;
  margin: 0;
}
.routerView {
  margin-left: -130px;
}
.homeIcon i {
  font-size: 30px;
  padding: 15px;
}
.homeIcon {
  height: 60px;
  border-bottom: 1px solid #e0e0e0;
}
.homeHeader {
  height: 100px !important;
}
.homeRouter {
  height: 50px;
}
.bg{
  background-color: #f0f2f5;
}
.titleHeader{
  font-weight: bold;
  margin-top: 20px;
  font-family:'Courier New', Courier, '楷体';
  font-size: 16px
}
.home .pictureHome{
  margin-top: 5px;
  width: 50px;
  height:50px;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01639c586c91bba801219c77f6efc8.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668675174&t=4aed97e835100005aa9d4a5b0e4e61f9');
  background-size: 100% 100%;
  border-radius: 50%
}
.title_text{
  margin-top: 20px;
  margin-left: 20px
}
.logo{
  font-family: '华文行楷';
  margin:  20px 20px 0  20px;
  color: white;
  font-size: 30px;
  width:160px
  
}
</style>